<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<style type="text/css">
			#grandfather {
				width: 500px;
				height: 500px;
				background: red;
			}
			
			#father {
				width: 300px;
				height: 300px;
				background: blue;
			}
			
			#son {
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
				left: 0;
				top: 520px;
			}
		</style>
	</head>

	<body>
		<!--
			document树
		-->
		<div id="grandfather">
			<div id="father">
				<div id="son">

				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		$('#grandfather').mouseenter(function() {
			alert('grandfather')
		})
		$('#father').mouseenter(function() {
			alert('father')
			// 如果返回false就可以阻止冒泡
			
		$('#son').mouseenter(function() {
			alert('son')
			
		})
		
	</script>

</html>